目標

在每張專輯頁面新增「隨機播放一首」按鈕，使用戶可以隨機點擊播放專輯內的任意一首歌曲。
目前專輯頁面已經能夠顯示專輯資訊、專輯封面、以及歌曲列表。
今天的目標是：

1. 在專輯資訊區新增一個「隨機播放一首」按鈕。
2. 點擊按鈕時，能夠隨機打開專輯中任意一首歌曲的播放連結（YouTube）。

HTML

在專輯資訊 <div> 中新增按鈕：

  <button id="random-play-btn" class="purple-btn">隨機播放一首</button>

CSS

為按鈕設計紫色漸層、圓角及懸停效果：

.purple-btn {
    background: linear-gradient(135deg, #6b568a, #6d4cb5); /* 漸層紫色 */
    border: none;
    border-radius: 12px;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 10px 0;
}


.purple-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(128, 90, 213, 0.4);
}

JavaScript

在 album.js 中加入隨機播放邏輯：

// 隨機播放按鈕
    const randomBtn = document.getElementById("random-play-btn");
    randomBtn.addEventListener("click", () => {
        // 隨機選一首
        const randomSong = album.songs[Math.floor(Math.random() * album.songs.length)];
        const url = typeof randomSong === "string" ? "#" : randomSong.url;
        if (url !== "#") {
            window.open(url, "_blank"); // 在新分頁打開
        } else {
            alert("這首歌沒有連結可以播放！");
        }
    });

程式碼說明

const randomBtn = document.getElementById("random-play-btn"); 

• 這行是抓取 HTML 裡的「隨機播放一首」按鈕元素。
• randomBtn 變數就代表這個按鈕。

randomBtn.addEventListener("click", () => {

• 這行是為按鈕加上 點擊事件監聽器。
• 也就是說，當使用者點擊這個按鈕時，後面的程式碼就會執行。

const randomSong = album.songs[Math.floor(Math.random() * album.songs.length)];

• album.songs 是當前專輯的歌曲陣列。
• Math.random() 會產生 0 ~ 1 之間的隨機數字。
• Math.random() * album.songs.length 就會變成 0 到 歌曲數量 之間的數。
• Math.floor(...)會把這個數字取整數，變成陣列索引。
• 這樣就能隨機選出一首歌，存到 randomSong 變數。

const url = typeof randomSong === "string" ? "#" : randomSong.url;

• 這行是判斷隨機選到的歌曲資料格式：
  • 如果 randomSong 是 字串（舊版資料沒有 URL），就給一個 #。
  • 如果是物件（有 name + url），就取得它的 url。
• 目的是避免程式報錯。

if (url !== "#") {
    window.open(url, "_blank");
} else {
    alert("這首歌沒有連結可以播放！");
}

• 判斷是否有 URL：
  • 有 URL → 用 window.open 在新分頁打開歌曲連結（播放歌曲）。
  • 沒 URL → 跳出提示，告訴使用者這首歌無法播放。

畫面展示